import React, { Component } from 'react';

import { routerRedux, Route, Switch } from 'dva/router';

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button, Menu, Dropdown, Icon, Row, Col,
  Input, InputNumber,
  Steps, Card, Popover, Badge, Table, Tooltip, Divider,
  Checkbox, Modal, Radio,
  Select, Upload, Form, message

} from 'antd';
import classNames from 'classnames';
import { getRoutes } from '../../utils/utils';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ApplyProfile.less';
import u620 from '../../assets/u620.png';
import u622 from '../../assets/u622.png';
import yes from '../../assets/yes.png';
import no from '../../assets/no.png';
import querystring from 'querystring';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ pendingTask }) => ({
  pendingTask,
}))

@Form.create()
export default class CompleteApplyDetails2 extends Component {
  state = {
    id: '',
    reviewState: '',
    operationkey: 'tab1',
    stepDirection: 'horizontal',
    modalVisible: false,
    previewVisible: false,
    dispatchOne: false,
    dispatchTwo: false,
    dispatchThree: false,
    buyCarValueStart: '',
    businessShowList: {},
    buyCarValueEnd: '',
    brandValueStart: '',
    brandValueEnd: '',
    profileState2: '',
    downPaymentValueStart: '',
    downPaymentValueEnd: '',
    loanValueStart: '',
    loanValueEnd: '',
    previewImage: '',
    carEvaluation: null,
    ratingAgencies: null,
    shortlistedValue: null,
    priceVerifyValue: null,
    priceVerifyValueEnd: null,
    custTaskListLoading: false,
    fileList: {
      idcardVerify: [],
      assetVerify: {
        firstPayImages: [],
        invoiceImage: [],
        usedCar: [],
      },
    },
    imageRotateDeg: 0,
    enlarge: 1,
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    // console.log("qqqqqAAAAAAAAparams.id")
    // console.log(params.reviewState)

    this.setState({
      id: params.custId,
      taskId: params.taskId,
      reviewState: params.reviewState,
    })
    if (params.custId != null) {
      dispatch({
        type: 'pendingTask/queryBusiness',
        payload: { 
          id: params.custId,
        },
        callback: () => {
          const { pendingTask: { businessList } } = this.props;
          
          // console.log(JSON.stringify(businessList))
          this.setState({
            businessShowList: businessList
          })
          if (params.reviewState == 1) {
            businessList.idcardVerify&&
            this.setState({
                buyCarValueStart: businessList.idcardVerify.buyVerify.audit1,
                brandValueStart: businessList.idcardVerify.carVerify.audit1,
                downPaymentValueStart: businessList.assetVerify.payVerify.audit1,
                loanValueStart: businessList.assetVerify.scaleVerify.audit1,
        
              // dispatchOne: false
            })
          } else if (params.reviewState == 2 || params.reviewState == 3) {
            businessList.idcardVerify&&
            this.setState({
                buyCarValueEnd: businessList.idcardVerify.buyVerify.audit2,//购车
                brandValueEnd: businessList.idcardVerify.carVerify.audit2,  //品牌
                downPaymentValueEnd: businessList.assetVerify.payVerify.audit2,//首付款
                loanValueEnd: businessList.assetVerify.scaleVerify.audit2,  //贷款
                buyCarValueStart: businessList.idcardVerify.buyVerify.audit1,
                brandValueStart: businessList.idcardVerify.carVerify.audit1,
                downPaymentValueStart: businessList.assetVerify.payVerify.audit1,
                loanValueStart: businessList.assetVerify.scaleVerify.audit1,
            })
            if(params.reviewState == 2){
              if (businessList.idcardVerify.carClass == 2) {
                this.setState({
                  priceVerifyValue: businessList.usedCar.priceVerify.audit1,
                })
              }
            }
            if(params.reviewState == 3){
              if (businessList.idcardVerify.carClass == 2) {
                this.setState({
                  priceVerifyValue: businessList.usedCar.priceVerify.audit1,
                  priceVerifyValueEnd: businessList.usedCar.priceVerify.audit2,
                })
              }
            }
          } 
          businessList.idcardVerify.carClass == 1 ? null :
            this.setState({
              carEvaluation: businessList.usedCar.valuationMethod,
              ratingAgencies: businessList.usedCar.valuationOrg,
              shortlistedValue: businessList.usedCar.orgAccept,
              //TODO 二手车评估图片
              // businessList.usedCar.images,
            })
            let idcardFileList = this.state.fileList;
            let idcardVerifyFileList = businessList;
            if (idcardVerifyFileList.assetVerify.usedCar.images.length > 0 && businessList.idcardVerify.carClass == 1) {
              for (let i = 0; i < idcardVerifyFileList.usedCar.images.length; i++) {
                idcardFileList.assetVerify.usedCar.push({
                  uid: idcardVerifyFileList.assetVerify.usedCar.images[i],
                  name: 'xxx.png',
                  status: 'done',
                  url: idcardVerifyFileList.assetVerify.usedCar.images[i],
                })
              }
            }
            if (idcardVerifyFileList.idcardVerify.images.length > 0) {
              for (let i = 0; i < idcardVerifyFileList.idcardVerify.images.length; i++) {
                idcardFileList.idcardVerify.push({
                  uid: idcardVerifyFileList.idcardVerify.images[i],
                  name: 'xxx.png',
                  status: 'done',
                  url: idcardVerifyFileList.idcardVerify.images[i],
                })
              }
            }
            if (idcardVerifyFileList.assetVerify.firstPayImages.length > 0) {
              for (let i = 0; i < idcardVerifyFileList.assetVerify.firstPayImages.length; i++) {
                idcardFileList.assetVerify.firstPayImages.push({
                  uid: idcardVerifyFileList.assetVerify.firstPayImages[i],
                  name: 'xxx.png',
                  status: 'done',
                  url: idcardVerifyFileList.assetVerify.firstPayImages[i],
                })
              }
            }
            if (idcardVerifyFileList.assetVerify.invoiceImage.length > 0) {
              for (let i = 0; i < idcardVerifyFileList.assetVerify.invoiceImage.length; i++) {
                idcardFileList.assetVerify.invoiceImage.push({
                  uid: idcardVerifyFileList.assetVerify.invoiceImage[i],
                  name: 'xxx.png',
                  status: 'done',
                  url: idcardVerifyFileList.assetVerify.invoiceImage[i],
                })
              }
            }
            this.setState({
              fileList: idcardFileList
            })
            
        }
       
      });
    }
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  // componentWillUnmount() {
  //   window.removeEventListener('resize', this.setStepDirection);
  //   this.setStepDirection.cancel();
  // }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
      imageRotateDeg: 0,
    });
  }

  // handleChange = ({ fileList }) => this.setState({ fileList })

  handleRotate = () => {
    this.setState({
      imageRotateDeg: this.state.imageRotateDeg + 90,
    });
  }
  handleAmplification = () => {
    if (this.state.enlarge >= 2) {
      message.warning("不能再放大了")
    } else {
      this.setState({
        enlarge: this.state.enlarge * 2,
      })
    }
  }
  handleNarrow = () => {
    if (this.state.enlarge <= 1) {
      message.warning("不能再缩小了")
    } else {
      this.setState({
        enlarge: this.state.enlarge * 0.5,
      })
    }
  }

  render() {
    const { stepDirection, previewVisible, previewImage } = this.state;
    const { pendingTask: { businessList } } = this.props;
    // const { advancedOperation2 } = applyDetail;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const imgWidth = 500 * this.state.enlarge;
    const imgHeight = 500 * this.state.enlarge;

    return (

      <Row>
        <Col span={21}>
          <Card
            title="需求核实"
            bordered={false}
            style={{ marginBottom: 24 }}
          >
          {/* {JSON.stringify(businessList)} */}
            <Row>
              <DescriptionList className={styles.headerList} size="small" col="2">
                <Description term="车型">
                  {businessList.idcardVerify && businessList.idcardVerify.carType}
                </Description>
                <Description term="车辆类型" >
                  {businessList.idcardVerify && businessList.idcardVerify.carClass == "1" ? "新车" : "二手车"}
                </Description>


              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="提车照片">
                  <Upload
                    listType="picture-card"
                    fileList={this.state.fileList.idcardVerify}
                    onPreview={this.handlePreview}
                    showUploadList={{ showRemoveIcon: false }}
                  >
                  </Upload>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="购车行为初审">
                  <RadioGroup value={this.state.buyCarValueStart} disabled={this.state.dispatchOne} onChange={this.handleBuyCarValueStart}>
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.buyCarValueStart == 1 ? <img src={yes} /> : null}
                  {this.state.buyCarValueStart == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
             {/* aaa {this.state.buyCarValueEnd}zzz */}
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="购车行为复审">
                  <RadioGroup value={this.state.buyCarValueEnd} disabled={this.state.dispatchTwo} onChange={this.handleBuyCarValueEnd}>
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.buyCarValueEnd == 1 ? <img src={yes} /> : null}
                  {this.state.buyCarValueEnd == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="品牌型号初审">
                  <RadioGroup value={this.state.brandValueStart} disabled={this.state.dispatchOne} onChange={this.handleBrandValueStart}>
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.brandValueStart == 1 ? <img src={yes} /> : null}
                  {this.state.brandValueStart == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="品牌型号复审">
                  <RadioGroup value={this.state.brandValueEnd} disabled={this.state.dispatchTwo} onChange={this.handleBrandValueEnd}>
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.brandValueEnd == 1 ? <img src={yes} /> : null}
                  {this.state.brandValueEnd == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

          </Card>

          <Card
            title="资产核实"
            bordered={false}
            style={{ marginBottom: 24 }}
          >
            <Row> 
              <DescriptionList className={styles.headerList} size="small" col="2">
                <Description term="厂商指导价">
                  {businessList.assetVerify && businessList.assetVerify.refPrice}
                </Description>
                <Description term="经销商报价">
                  {businessList.assetVerify && businessList.assetVerify.carPrice}
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="2">
                <Description term="首付款">
                  {businessList.assetVerify && businessList.assetVerify.firstPayment}
                </Description>
                <Description term="首付款比例">
                  {businessList.assetVerify && ((businessList.assetVerify.firstPayment / businessList.assetVerify.carPrice) * 100).toFixed(2)}%
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="购车发票">
                  <Upload
                    listType="picture-card"
                    fileList={this.state.fileList.assetVerify.invoiceImage}
                    onPreview={this.handlePreview}
                    showUploadList={{ showRemoveIcon: false }}
                  >
                  </Upload>
                </Description>
              </DescriptionList>
            </Row>
            <Row style={{ marginTop: 20 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="首付款凭证">
                  <Upload
                    listType="picture-card"
                    fileList={this.state.fileList.assetVerify.firstPayImages}
                    onPreview={this.handlePreview}
                    showUploadList={{ showRemoveIcon: false }}
                  >
                  </Upload>
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="首付款初审">
                  <RadioGroup value={this.state.downPaymentValueStart} disabled={this.state.dispatchOne} >
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.downPaymentValueStart == 1 ? <img src={yes} /> : null}
                  {this.state.downPaymentValueStart == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="首付款复审">
                  <RadioGroup value={this.state.downPaymentValueEnd} disabled={this.state.dispatchTwo} o>
                    <Radio value={1}>一致</Radio>
                    <Radio value={2}>不同</Radio>
                  </RadioGroup>
                  {this.state.downPaymentValueEnd == 1 ? <img src={yes} /> : null}
                  {this.state.downPaymentValueEnd == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="贷款比例初审">
                  <RadioGroup value={this.state.loanValueStart} disabled={this.state.dispatchOne} >
                    <Radio value={1}>合规</Radio>
                    <Radio value={2}>不合规</Radio>
                  </RadioGroup>
                  {this.state.loanValueStart == 1 ? <img src={yes} /> : null}
                  {this.state.loanValueStart == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <Row style={{ marginTop: 40 }}>
              <DescriptionList className={styles.headerList} size="small" col="1">
                <Description term="贷款比例复审">
                  <RadioGroup value={this.state.loanValueEnd} disabled={this.state.dispatchTwo} >
                    <Radio value={1}>合规</Radio>
                    <Radio value={2}>不合规</Radio>
                  </RadioGroup>
                  {this.state.loanValueEnd == 1 ? <img src={yes} /> : null}
                  {this.state.loanValueEnd == 2 ? <img src={no} /> : null}
                </Description>
              </DescriptionList>
            </Row>

            <br />
            <br />
            {
              businessList.idcardVerify && businessList.idcardVerify.carClass == "1" ?
                null
                :
                <Row style={{ marginTop: 10 }}>
                  <DescriptionList className={styles.headerList} size="small" >
                    <Description term="二手车评估方式">
                      <RadioGroup value={this.state.carEvaluation} >
                        <Radio value={1}>自评</Radio>
                        <Radio value={2}>他评</Radio>
                      </RadioGroup>
                    </Description>
                  </DescriptionList>
                </Row>
            }
            {
              this.state.carEvaluation == 2 ?

                <div >
                  <Row style={{ marginTop: 40 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="评估报告">
                        <Upload
                          listType="picture-card"
                          fileList={this.state.fileList.assetVerify.usedCar}
                          onPreview={this.handlePreview}
                          showUploadList={{ showRemoveIcon: false }}
                        >
                        </Upload>
                      </Description>
                    </DescriptionList>
                  </Row>
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" >
                      <Description term="评估机构">
                        <Input style={{ width: 200 }} value={this.state.ratingAgencies} />
                      </Description>
                    </DescriptionList>
                  </Row>
                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" >
                      <Description term="机构是否入围">
                        <RadioGroup value={this.state.shortlistedValue} o>
                          <Radio value={1}>是</Radio>
                          <Radio value={2}>否</Radio>
                        </RadioGroup>
                      </Description>
                    </DescriptionList>
                  </Row>

                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="评估价格核实初审">
                        <RadioGroup value={this.state.priceVerifyValue} >
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.priceVerifyValue == 1 ? <img src={yes} /> : null}
                        {this.state.priceVerifyValue == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>

                  <Row style={{ marginTop: 20 }}>
                    <DescriptionList className={styles.headerList} size="small" col="1">
                      <Description term="评估价格核实复审">
                        <RadioGroup value={this.state.priceVerifyValueEnd}>
                          <Radio value={1}>一致</Radio>
                          <Radio value={2}>不同</Radio>
                        </RadioGroup>
                        {this.state.priceVerifyValueEnd == 1 ? <img src={yes} /> : null}
                        {this.state.priceVerifyValueEnd == 2 ? <img src={no} /> : null}
                      </Description>
                    </DescriptionList>
                  </Row>
                </div>
                :
                null
            }

          </Card>
        </Col>
        <Modal
          width={imgWidth + 40}
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}>
          <div style={{ justifyContent: 'space-around', display: 'flex' }}>
            <img alt="example"
              style={{
                width: imgWidth,
                height: imgHeight,
                transform: `rotate(${this.state.imageRotateDeg}deg)`
              }}
              src={previewImage}
            />
          </div>
          <Row type="flex" justify="space-around" style={{
            marginTop: 25,
          }} >
            <Button onClick={this.handleRotate}>旋转</Button>
            <Button onClick={this.handleAmplification}>放大</Button>
            <Button onClick={this.handleNarrow}>缩小</Button>
          </Row>
        </Modal>
      </Row>
      // {/* </PageHeaderLayout> */}
    );
  }
}
